<template>
	<div class="addbanner w944">
		<alert ref="alert"></alert>
		<bannerType ref="bannerType" :LabelsIds="LabelsIds" :LabelsNames="LabelsNames" v-on:labelNamesChanges="reveiceChange($event)"></bannerType>
		<div class="label_top">
			<button @click="cancel"><i><&nbsp;</i>返回</button>
			<p>{{updateTitle}}</p>
		</div>
		<div class="content">
			<div class="form_line">
				<span class="tit"><i>*</i>轮播图封面：</span>
				<el-upload class="avatar-uploader" refs="uploadxls" action="http://www.h3clearning.com/huathree-back/uploadFile" :headers="myHeaders" :show-file-list="false" :before-upload="beforeAvatarUpload" :on-success="handleAvatarSuccess">
				  	<img v-if="imageUrl" :src="imageUrl" class="avatar">
				  	<i v-else class="el-icon-plus avatar-uploader-icon"><b style="display:block;font-weight:normal"><em>上传图片</em></b></i>
				</el-upload>
				<em class="rules">建议尺寸为672*378像素，支持jpg、jpeg、png格式，大小小于1M</em>
			</div>
			<div class="form_line">
				<span class="tit"><i>*</i>轮播图详情：</span>
				<el-radio-group v-model="type" @change="getNowType">
					<el-radio :label="1" name="typeLb">课程</el-radio>
					<el-radio :label="5" name="typeLb">直播</el-radio>
					<el-radio :label="6" name="typeLb">知识地图</el-radio>
					<el-radio :label="2" name="typeLb">图文资讯</el-radio>
					<el-radio :label="-1" name="typeLb">活动讲座</el-radio>
					<el-radio :label="0" name="typeLb">外链</el-radio>
				</el-radio-group>
				<em class="rules">说明：轮播图选择课程、直播，如果选择了观看权限的内容，前端会对用户进行过滤，没有权限的用户将看不到该轮播图</em>
				<div class="details">
					<input v-model="LabelsNames"/>
					<a @click="openLabel" v-if="this.type!=0">添加</a>
					<a v-if="this.type==0" style="width: 110px;">输入外链地址</a>
				</div>
			</div>
			<div class="form_line">
				<span class="tit"><i>*</i>轮播图标题：</span>
				<input v-model="name"/>
			</div>
			<div class="footerButton">
				<a @click="checkSave" v-bind:style="{background: clickLock==true ? '#44CEF6' : '#3a8ee6'}">保存</a>
				<a @click="cancel" class="cancel">取消</a>
			</div>
		</div>
	</div>
</template>
<script>
	import alert from '../../components/Alert.vue';
	import bannerType from '../../components/bannerType.vue';
	export default {
		data() {
			return {
				clickLock:true,
				LabelsIds:[],
				LabelsNames:[],
				updateTitle:'',
				id:'',
				type:1,
				transitionType:1,
				name:'',
				internalLink:'',//内部链接
				externalLink:'',//外部链接
				imageUrl: '',
				sort:'',
				myHeaders:{Authorization:this.$root.userInfoMsg.sessionId}
			}
		},
		methods: {
			getParams() {
				var routerParams = this.$route.params.type;
				if(routerParams == 'edit') {
					this.nowType = 'edit';
					this.updateTitle = "编辑轮播图";
				}else{
					this.nowType = 'add';
					this.updateTitle = "新增轮播图";
				}
			},
			getNowType(){
				this.transitionType = this.type;
			},
			openLabel(){
				this.$refs.bannerType.labelTable=true;
				this.$refs.bannerType.getTableList();
			},
			reveiceChange(event){
				this.LabelsIds = event.arg1;
	        	this.LabelsNames = event.arg2;
	     	},
			addBanner() {
				if(this.type==0){
					this.internalLink = '';
					this.externalLink = this.LabelsNames
				}else{
					this.internalLink = this.LabelsIds;
					this.externalLink = ''
				};
				if(this.clickLock==true){
					this.clickLock = false;
					this.$ajax({
						url: this.$root.jifuUrl + "/mns/homepageRolation/addHomepageRolation",
						headers:{'ContentType': 'application/json; charset=utf-8'},
						method: 'POST',
						data: {
							name:this.name,
							type:this.type,
							internalLink:this.internalLink,
							externalLink:this.externalLink,
							img:this.imageUrl,
							sort:'',
							rootcompanyid:1
						},
						success: res => {
							if (res.data.code == 200) {
								this.$refs.alert.show({alertText: '保存成功',alertSubmit: function(){alertStatus: 0}});
								setTimeout(() =>{
									this.$router.push({
										name:'banner'
									});
								},2000)
							}else{
								this.clickLock = true;
								this.failText = res.data.message;
								this.$rootFunction().deleteResFail();
							}
						}
					});
				}
			},
			editBanner() {
				if(this.type==0){
					this.internalLink = '';
					this.externalLink = this.LabelsNames
				}else{
					this.internalLink = this.LabelsIds;
					this.externalLink = ''
				};
				this.$ajax({
					url: this.$root.jifuUrl + '/mns/homepageRolation/updateHomepageRolation',
					headers:{'ContentType': 'application/json; charset=utf-8'},
					method: 'PUT',
					data: {
						id:this.id,
						name:this.name,
						type:this.type,
						internalLink:this.internalLink,
						externalLink:this.externalLink,
						img:this.imageUrl,
						sort:'',
						rootcompanyid:1
					},
					success: res => {
						if (res.data.code == 200) {
							this.$refs.alert.show({alertText: '保存成功',alertSubmit: function(){alertStatus: 0}});
							setTimeout(() =>{
								this.$router.push({
									name:'banner'
								});
							},2000)
						}else{
							this.failText = res.data.message;
							this.$rootFunction().deleteResFail();
						}
					}
				});
			},
			checkSave() {
				if(this.nowType == 'add') {
					this.addBanner();
				}else if(this.nowType == 'edit') {
					this.editBanner();
				}
			},
			cancel() {
				this.$router.go(-1);
			},
			handleAvatarSuccess(res) {
				if(res.code == 200) {
					this.imageUrl = res.data[0];
				};
			},
			beforeAvatarUpload(file) {
				const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png');
				const isLt2M = file.size / 1024 / 1024 < 2;
				if(!isLt2M) {
					this.$message.error('上传图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
			}
		},
		components: {
			alert,
			bannerType
		},
		mounted() {
			this.getParams();
			if(this.nowType=="edit"){
				console.log('306',this.nowType,this.$root.bannerMsg);
				this.id = this.$root.bannerMsg.id;
				this.name = this.$root.bannerMsg.name;
				this.type = this.$root.bannerMsg.type;
				this.LabelsIds = this.$root.bannerMsg.internalLinkId;
				this.externalLink = this.$root.bannerMsg.externalLink;
				this.imageUrl = this.$root.bannerMsg.img;
				this.sort = this.$root.bannerMsg.sort;
				if(this.$root.bannerMsg.type==0){
					this.LabelsNames = this.$root.bannerMsg.externalLink
				}else{
					this.LabelsNames = this.$root.bannerMsg.title;
				}
			};
		},
		watch:{
			items:{
				handler:function(){
					alert(this.$refs.linkType.value);
				},
				deep:true
			}
		}
	}
</script>
<style>
	.addbanner .form_line{overflow: hidden;margin-bottom: 20px;}
	.addbanner .form_line .tit{width: 110px;height:34px;line-height: 34px;display: inline-block;text-align: right;float: left;color: #333;}
	.addbanner .form_line .tit i{font-style: normal;color: #FF2D51;margin-right: 5px;}
	.addbanner .rules{font-style: normal;display: block;margin: 5px 0 2px 110px;font-size: 12px;color: #888;}
	.addbanner .form_line .el-radio-group,.addbanner .form_line .el-radio{height:34px;line-height: 34px;}
	.addbanner .form_line input{width: 504px;height: 33px;line-height: 33px;border: 1px solid #ccc;border-radius: 5px;display: inline-block;box-sizing: border-box;padding-left: 15px;font-size: 14px;}
	.addbanner .form_line .avatar-uploader{display:inline-block}
	.addbanner .avatar-uploader .el-upload {border-radius:6px;cursor:pointer;position:relative;overflow:hidden;width:250px;height:136px;}
	.addbanner .avatar-uploader-icon {font-size:28px;color:#8c939d;width:248px;height:93px;text-align:center;background:#f2f2f2;padding-top: 45px;}
	.addbanner .avatar {width:248px;height:136px;display:block;}
	.addbanner .avatar-uploader em{font-style: normal;font-size: 15px;}
	.addbanner .avatar-uploader input{border: none;}
	.addbanner .details{overflow: hidden;margin: 10px 0 0 110px;}
	.addbanner .details input{width: 424px;border-radius: 5px 0 0 5px;}
	.addbanner .details a{width: 80px;height: 33px;line-height: 33px;display: inline-block;color: #fff;margin-left: -5px;background: #44CEF6;text-align: center;font-size: 14px;border-radius: 0 5px 5px 0;box-sizing: border-box;cursor: pointer;}
</style>